<template>
  <!--  设备型号管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.equipName" clearable placeholder="请输入采集仪型号"></el-input>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">型号新增</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="equipName" show-overflow-tooltip label="采集仪型号" width="120">
        </el-table-column>
        <el-table-column prop="sensorTypeNameList" show-overflow-tooltip label="传感器类型" min-width="180">
        </el-table-column>
        <el-table-column prop="equipRange" label="量程" width="120">
        </el-table-column>
        <el-table-column prop="accuracy" label="精度" width="120">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
        </el-table-column>
        <el-table-column prop="companyName" min-width="200" label="设备厂家"></el-table-column>
        <el-table-column prop="operator" show-overflow-tooltip label="操作人" width="120">
        </el-table-column>
        <el-table-column prop="remark" show-overflow-tooltip label="说明" width="150">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
          <template slot-scope="scope">
            {{scope.row.updateTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该型号吗？"
                           @confirm="handleDelete(scope.row)">
              <button slot="reference" class="btn_delete">删除</button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="110px">
        <el-form-item label="采集仪型号" prop="equipName">
          <el-input v-model="currentRow.equipName" placeholder="请输入采集仪型号"></el-input>
        </el-form-item>
        <el-form-item label="传感器类型" prop="sensorTypeList">
          <el-select v-model.trim="currentRow.sensorTypeList" multiple clearable placeholder="请选择通信类型">
            <el-option v-for="item in EnumSensorTypeList"
                       :key="item.code"
                       :label="item.name"
                       :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="量程" prop="equipRange">
          <el-input v-model="currentRow.equipRange" placeholder="请输入量程"></el-input>
        </el-form-item>
        <el-form-item label="精度" prop="accuracy">
          <el-input v-model="currentRow.accuracy" placeholder="请输入精度"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="currentRow.price" type="number" placeholder="请输入价格"></el-input>
        </el-form-item>

        <el-form-item label="产品图片" prop="picList">
          <upload-img v-model="currentRow.picList" :limit="3" :size-limit="3"
                      ref="uploadPic"></upload-img>
        </el-form-item>
        <el-form-item label="设备厂家" prop="companyName">
          <el-input v-model="currentRow.companyName" type="number" placeholder="请输入设备厂家名称"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input v-model="currentRow.remark" type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    placeholder="产品描述"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {equipNettyAdd, equipNettyDelete, equipNettyQuery, equipNettyUpdate} from '@/services/model/sensor'
  import Enums from '@/utils/enums'
  import Format from '@/utils/format'
  import UploadImg from '@/components/upload-img'
  // form表单校验规则
  const RULES = {
    // name: {
    //   required: true,
    //   message: '请输入标识'
    // },
    equipName: {
      required: true,
      message: '请输入采集仪类型'
    },
  }
  export default {
    mixins: [Enums],
    components: {UploadImg},
    data() {
      return {
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },

        rules: RULES, // 表单校验的规则
        tableList: [],


        isShowDialog: false, // 是否显示弹窗
        currentRow: {}, // 新增数据
        EnumSensorTypeList: [],
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑传感器信息' : '新增传感器信息'
      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
    },
    methods: {
      async handleDelete(row) {
        let res = await equipNettyDelete({id: row.id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '数据已删除'
          })
          this.queryList()
        } else {
          this.$notify({
            type: 'error',
            title: '提示',
            message: '数据删除失败'
          })
        }
      },

      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },

      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 表单提交
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitData()
          }
        })
      },
      async submitData() {
        // 根据ID判断使用新增还是编辑
        let action = this.currentRow.id ? equipNettyUpdate : equipNettyAdd
        let res = await action(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.currentRow.id ? '编辑成功' : '添加成功'
          })
          this.isShowDialog = false
          this.queryList()
        }
      },
      // 新增数据
      handleAdd() {
        this.currentRow = {}
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      /**
       * row  当前操作行的对象
       */
      handleEdit(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      async queryList() {
        let res = await equipNettyQuery(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)


      },
    },
    mounted() {
      //	传感器类型下拉框
      this.queryDictList(['EnumSensorType'], ['EnumSensorTypeList'])
    },
    activated() {
      this.queryList()
    }
  }
</script>

<style lang="less" scoped>
</style>
